<template>
  <div>
    <el-container style="width: 1423px">
      <el-header class="Top" style="height: 30px">
        <!-- 头部下拉菜单 -->
        <el-dropdown class="TopDropdown1">
          <span class="el-dropdown-link">
            <i class="el-icon-s-flag"></i>中国大陆<i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>福建</el-dropdown-item>
            <el-dropdown-item>广西</el-dropdown-item>
            <el-dropdown-item>广东</el-dropdown-item>
            <el-dropdown-item>江西</el-dropdown-item>
            <el-dropdown-item>四川</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 注册和登录 -->
        <div class="HeaderBtnLr">
          <i class="el-icon-s-custom"></i
          ><el-button
            type="text"
            class="loginBtn"
            style="color: red"
            @click="gotoLogin"
            v-if="!showUsername"
            >亲，请登录</el-button
          >
          <i style="color: balck" v-if="showUsername">{{ showUsername }}</i>
          <el-button
            class="clearUser"
            type="text"
            style="color: red"
            v-if="showUsername"
            @click="clearUserBtn"
            >注销</el-button
          >
          <el-button type="text" class="registerBtn">免费注册</el-button>
          <el-button
            type="text"
            style="color: red"
            class="default"
            @click="returnDefault"
            >首页</el-button
          >
        </div>

        <!-- 购物车和收藏夹 -->
        <div class="HeaderBtnSc">
          <i class="el-icon-s-goods"></i
          ><el-button
            type="text"
            class="ShoppingCart"
            style="color: red"
            @click="gotoShopingCar"
            >购物车</el-button
          >
          <i class="el-icon-s-marketing"></i
          ><el-button type="text" class="ShoppingCart" style="color: red" @click="gotoOrder"
            >我的订单</el-button
          >
          <el-dropdown>
            <span class="Favorites">
              <i class="el-icon-star-on"></i>收藏夹<i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="collectionGoods"
                >收藏的宝贝</el-dropdown-item
              >
              <el-dropdown-item @click.native="collectionShop"
                >收藏的店铺</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div class="HeaderBtnFa">
          <i class="el-icon-s-shop"></i>
          <el-button type="text" class="FreeOpenShop" @click="gotoOpenShop"
            >免费开店</el-button
          >
          <i class="el-icon-s-opportunity"></i>
          <el-button type="text" class="FreeOpenShop" @click="gotoNewArrival"
            >新品上市</el-button
          >
          <el-dropdown>
            <span class="Favorites">
              <i class="el-icon-phone"></i> 联系客服<i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="gotoConsumerServices"
                >消费者客服</el-dropdown-item
              >
              <el-dropdown-item @click.native="pushMessage"
                >商家服务大厅</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <i class="el-icon-question"></i
          ><el-button type="text" class="aboutOur" @click="gotoAboutOur"
            >关于我们</el-button
          >
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>

      <el-footer>
        <div
          class="footer"
          style="width: 100%; height: 40px; background-color: white"
        >
          <el-button type="text" class="ICP"
            >ICP备案号:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</el-button
          >
          <el-button type="text" class="gongan"
            >公安备案号:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</el-button
          >
        </div>
      </el-footer>
    </el-container>
  </div>
</template>          

<script>
import Cookies from "js-cookie";
import { clearToken } from "../utils/auth";
export default {
  inject:["reload"],
  data() {
    return {};
  },
  methods: {
    returnDefault() {
      this.$router.push("/default");
    },
    gotoNewArrival() {
      this.$router.push("/newArrival");
    },
    gotoOpenShop() {
      this.$router.push("/openShop");
    },
    pushMessage() {
      this.$message.error("该功能尚未开发完全，敬请期待！！！");
    },
    gotoConsumerServices() {
      this.$router.push("/consumerServices");
    },
    gotoAboutOur() {
      this.$router.push("/aboutOur");
    },
    collectionGoods() {
      this.$router.push("/collectionGoods");
    },
    collectionShop() {
      this.$router.push("/collectionShop");
    },
    gotoLogin() {
      this.$router.push("/login");
    },
    gotoShopingCar() {
      this.$router.push("/shoppingcart");
    },
    gotoOrder(){
      this.$router.push("/order")
    },
    clearUserBtn() {
      Cookies.remove("username");
      clearToken();
      this.$message.success("注销成功");
      this.reload();
    },
  },
  computed: {
    showUsername() {
      return Cookies.get("username");
    },
  },
};
</script>

<style scoped>
/* 头部 */
.Top {
  width: 100%;
  height: 30px;
  background-color: #f5f5f5;
}
/* 位置下拉菜单 */
.TopDropdown1 {
  margin-left: 0px;
}
/* 注册和登录 */
.HeaderBtnLr {
  margin-left: 100px;
  margin-top: -29px;
}
/* 购物车和收藏夹 */
.HeaderBtnSc {
  margin-left: 700px;
  margin-top: -39px;
}
.Favorites {
  margin-left: 10px;
}
.el-icon-star-on {
  font-size: 17px;
}
.el-icon-s-marketing {
  font-size: 16px;
  margin-left: 3px;
  margin-top: 3px;
}
/* 免费开店和关于我们 */
.HeaderBtnFa {
  margin-left: 1030px;
  margin-top: -40px;
}
.el-icon-question {
  margin-left: 5px;
}
.el-icon-s-opportunity {
  margin-left: 5px;
}
.FreeOpenShop {
  margin-left: -3px;
}

/*此处是为了将原有的横向滚动条隐藏，原本的滚动条很丑*/
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.ICP {
  float: left;
  margin-left: 200px;
}
.gongan {
  float: left;
  margin-left: 200px;
}

.registerBtn {
  margin-left: 10px;
}

.clearUser{
  margin-left: 40px;
}
</style>